<template>
  <div class="box">
    <el-card class="box-card">
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称">
          <el-input v-model=data.goodsName :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model=data.price :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model=customer.name :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model=customer.telephone :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model=customer.address :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="num" :min="1" :max=data.number label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrder">立即付款</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Order',
    data() {
      return {
        id: '',
        data: [],
        customer: [],
        number: '',
        num: ''
      }
    },
    mounted: function() {
      this.getData()
    },
    methods: {
      getData() {
        this.id = this.$route.query.id
        this.$axios.post('/findGoodsDetail', {
          id: this.id
        }).then(resp => {
          this.data = resp.data
        })
        this.$axios.get('/getCustomer').then(resp => {
          this.customer = resp.data
        })
      },
      addOrder() {
        this.$axios.post('/addOrder', {
          goodsId: this.id,
          tel: this.customer.telephone,
          address: this.customer.address,
          number: this.num
        }).then(resp => {
          if(resp.data.code===200){
            alert("购买成功")
          }
          else alert("购买失败")
        })
      }
    }
  }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
    margin-top: 25px;

  }

  .box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
